<template>
  <div class="page-container theme-primary-container">
    <div class="login-header">
      <img src="@/assets/imgs/logo.png"/>
    </div>
    <div class="login-container" :style="getBgStyle()">
      <div class="inner">
        <div class="page-title">通行证登录</div>
        <Form ref="form" :rules="rule" :model="form" :label-width="0" class="form-container">
          <Row>
            <Col span="24">
              <FormItem prop="UserName">
                <Input v-model="form.UserName" placeholder="请输入登录账号" @on-keydown="keydown"></Input>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem prop="Password">
                <Input type="password" v-model="form.Password" placeholder="请输入登录密码" :maxlength="16" autocomplete="new-password" @on-keydown="keydown"></Input>
              </FormItem>
            </Col>
            <Col span="24" class="mt10">
              <Checkbox v-model="form.rememberPwd">记住密码</Checkbox>
            </Col>
          </Row>
        </Form>
        <Button :loading="submitting" type="primary" class="login-btn" @click="login">立即登录</Button>
      </div>
    </div>
    <div class="login-footer">
      <div>备案号：蜀ICP备16035996号-3  成都领沃网络技术有限公司 版权所有</div>
      <div>Copyright©2012-2019 Yungengxin.All Rights Reserverd.</div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
let loginBg = require('@/assets/imgs/login-bg.jpg')

export default {
  data () {
    return {
      form: {
        UserName: '',
        Password: '',
        // 记住密码
        rememberPwd: false
      },
      rule: {
        UserName: this.formRuleValidator.Validator.getRequiredRule(),
        Password: this.formRuleValidator.Validator.getRequiredRule()
      },
      showTip: false,
      // 登录成功后跳转的页面
      redirect: '',
      submitting: false,
      loadingVerifyCode: false,
      MAX_WAIT_TIME: 120,
      setTimeoutKey: null,
      enable: true
    }
  },
  beforeMount () {
    if (this.util.getToken()) {
      this.util.toMain()
      return
    }

    this.redirect = this.$route.query.redirect

    // 记录密码数据
    let loginForm = localStorage.getItem('loginForm')
    if (loginForm) {
      this.form = JSON.parse(loginForm)
    }
  },
  methods: {
    ...mapActions(['handleLogin']),
    getBgStyle () {
      return {
        'background-image': `url(${loginBg})`
      }
    },
    login () {
      let form = this.$refs['form']
      form.validate(valid => {
        if (valid) {
          let data = this.objectUtil.copyObject(this.form)
          let UserName = data.UserName.trim()
          let Password = data.Password.trim()
          let rememberPwd = data.rememberPwd

          this.submitting = true
          this.handleLogin(data).then(() => {
            // 记住密码逻辑
            this.submitting = false
            if (rememberPwd) {
              let loginForm = {
                UserName,
                Password,
                rememberPwd: true
              }
              localStorage.setItem('loginForm', JSON.stringify(loginForm))
            } else {
              localStorage.removeItem('loginForm')
            }

            if (this.redirect) {
              this.$router.push({
                path: decodeURIComponent(this.redirect)
              })
            } else {
              this.util.toMain()
            }
          }).catch(() => {
            this.submitting = false
          })
        }
      })
    },
    keydown (e) {
      if (e.keyCode === 13) {
        this.login()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-container {
  height: 100%;
  .login-header {
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1001;
    height: 58px;
    width: 100%;
    opacity: 0.7;
    background: #262626;
    img {
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);
    }
  }
  .login-container {
    background-size: cover;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    height: 100%;
    overflow: hidden;
    .inner {
      width: 450px;
      padding: 40px 40px 50px;
      border-radius: 10px;
      position: fixed;
      top: 50%;
      right: 230px;
      transform: translateY(-50%);
      background: #fff;
      z-index: 1003;
      .page-title {
        color: #64b1f5;
        font: lighter 1.8em/130% "Microsoft YaHei", "SimSun";
        text-align: center;
      }
      .form-container {
        margin-top: 50px;
        .tip {
          visibility: hidden;
          &.active {
            visibility: visible;
          }
        }
      }
      .login-btn {
        margin-top: 50px;
        width: 100%;
        height: 50px;
        font-size: 16px;
        color: #fff;
      }
    }
  }
  .login-footer {
    font-size: 14px;
    bottom: 0%;
    left: 0;
    z-index: 1002;
    padding: 15px;
    width: 100%;
    color: #7e8b95;
    position: fixed;
    background: #2b3034;
    text-align: center;
    line-height: 21px;
  }
}

@media screen and (max-width: 1200px) {
  .login-container {
    background: #373d41 !important;
  }
}
</style>
